<template>
  <section >
      <el-form label-width="40px">
        <el-form-item label="已选">
          <el-tag class="tag" size="mini" v-for="(tag,i) in tags" :key="i" closable @close="handleClose(tag)">{{getTageName(list,tag)}}</el-tag>
        </el-form-item>
        <el-form-item label="挑选" size="mini">
          <el-cascader v-model="selLabels" :options="list" v-if="list" filterable
                       :props="props" :change-on-select="true" @change="handleChange"></el-cascader>
        </el-form-item>
      </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "selLabel",
    props:['test'],
    data(){
      return{
        tags:[],
        selLabels:[],
        list:null,
        t:null,
        props:{
          label:'name',
          value:'id',
          children:'childrens',
          // multiple:true
        }
      }
    },
    watch:{
      test(nv,ov){
        if(nv) this.getUserLabelList()
      }
    },
    created(){
      this.getUserLabelList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getTageString(){
        this.tags.forEach(tag=>{
          this.list.forEach(l=>{
            this.getTest(l,tag)
          })
        })
      },
      getTest(l,tag){
        let currTag=null
        if(tag === l.id){
          console.log('找到了')
          currTag=l
        }else {
          if(l.childrens && l.childrens.length >0){
            let tmpTag= this.getTest()
            if(tmpTag) currTag=tmpTag

          }
        }
        return currTag
      },
      getTageName(array,tag){
        let name=null
        for(let i=0;i<array.length;i++){
          if(name !== null){
            break
          }
          let tmp=array[i]
          if(tmp.id === tag){
            name =tmp.name
          }else if(tmp.childrens && tmp.childrens.length >0){
            name =this.getTageName(tmp.childrens,tag)
          }else {
            continue
          }
        }
        return name
      },
      getUserLabelList(key) {
        this.fetch({name: "getUserLabelList",data:{key}})
          .then(res => {
            console.log('标签列表------',res)
            this.list =res
            this.makeTags()
            this.getTageString()
            // this.makeList(res)
          })
          .catch(err => {
            console.log(err)
            errHandler.handle(this, err)
          })
      },
      makeTags(){
        this.tags=[]
        if(!this.test) return
        this.tags=this.test
        return
        let tmp = this.test.split('|')
        tmp.forEach(t=>{
          t=parseFloat(t)
          this.tags.push(t)
        })
      },
      handleChange(e){
        console.log('当前选中------------------------',e)
        //[1,2,3]
        //[4,5,6]
        //[1,2,3,7]
        //[1,2,3,4,5,6
        clearTimeout(this.t)
        this.t = setTimeout(()=>{
          console.log('应该只有一次------')
          let checkEE = e[e.length-1]
          e.forEach(ee=>{
            let index=this.tags.findIndex(tag=>ee === tag)
            if(index <0) this.tags.push(ee)
          })
          this.$emit('confirmLabel',this.tags)
        },1000)
      },
      handleClose(tag){
        this.tags.splice(this.tags.indexOf(tag), 1)
        this.$emit('confirmLabel',this.tags)
      }
    }
  }
</script>

<style scoped>
  .tag{
    margin: 0 5px;
  }
</style>
